<template>
    <el-container>
    <!-- <el-input type="text"  v-model="ziku_id">zikuid</el-input>
    <el-input type="text"  v-model="user_id">userid</el-input>
    <el-button @click="getdir">tst</el-button> -->
    <!-- <highcharts :options="options"  :styles="styles" ref="simpleChart"></highcharts> -->
    <el-main style="padding: 0;margin: 0;overflow:hidden;">
      <canvas id="canvas" :height="800" :width="1000"> </canvas>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
    </el-main>
    </el-container>
</template>

<script>
// import {} from '../../api/autopay'; 
import { shijianchuo } from '../../js/dates'; 
import axios from 'axios';
import Getmd5 from 'js-md5';
import highcharts from '../../components/Highcharts/Highcharts';


export default {
    name: '',
    data(){
        return {
            options: {
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature'
                    },
                    lineWidth: 2,
                    lineColor: '#F33',
                    id: 'temperature-axis'
                },
                series: [{
                    name: 'Temperature',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                    color: '#F33'
                }]
            },
            type: '3dpie',
            moreSamples: [{
              name: '柱形范围图',
              code: 'columnrange'
            }, {
              name: '下钻',
              code: 'drilldown'
            }, {
              name: '3D 饼图',
              code: '3dpie'
            }],
            styles: {
              width: 500,
              height: 400
            },
            istest:false,
            test_url:"http://hwdev.xiezixiansheng.com",
            url:"http://hwdev.xiezixiansheng.com",
            ziku_id:1900313,
            user_id:2397797,
            sys: "iOS13.2",
            
        }
    },
    components: {
        highcharts
    },
    mounted: function () {
        this.Test();
    },
    methods: {
      Test(){
           
            let dimensions = [document.documentElement.clientWidth, document.documentElement.clientHeight];

            let mouseX;
            let mouseY;

            let radius;
            const d2r = 0.0174533;

            let cx;
            let cy;

            let prism;

            let canvas;
            let ctx;

            let el = [];

            let poly;
            let poly2;

            const init = () => {

              dimensions = [document.documentElement.clientWidth, document.documentElement.clientHeight];

              mouseX = dimensions[0] / 2;
              mouseY = dimensions[1] / 2;

              radius = 50;
              // const d2r = 0.0174533;

              cx = Math.sin(60 * 0.0174533) * radius;
              cy = radius * 1.5;

              prism = Math.ceil(dimensions[0] / cx);

              canvas = document.getElementById('canvas');
              canvas.width = dimensions[0];
              canvas.height = dimensions[1];
              ctx = canvas.getContext('2d');

              el = [];
              for (let x = 0; x < prism * prism; x++) {
                el.push([Math.random(), 0.5]);
              }

              poly = [
              Math.sin(0 * d2r) * radius, Math.cos(0 * d2r) * radius,
              Math.sin(120 * d2r) * radius, Math.cos(120 * d2r) * radius,
              Math.sin(240 * d2r) * radius, Math.cos(240 * d2r) * radius];


              poly2 = [
              Math.sin(180 * d2r) * radius, Math.cos(180 * d2r) * radius,
              Math.sin(300 * d2r) * radius, Math.cos(300 * d2r) * radius,
              Math.sin(60 * d2r) * radius, Math.cos(60 * d2r) * radius];


            };

            const render = t => {
              const timer = Math.sin(t * 0.01);
              ctx.clearRect(0, 0, dimensions[0], dimensions[1]);
              for (let x = 0; x < prism * prism; x++) {

                const dist = Math.hypot(mouseX - (x % prism * cx + cx / 2), mouseY - (Math.floor(x / prism) * cy + cy / 2));
                let alpha = 1 - Math.abs(dimensions[0] / 2 / dist) / 2;

                el[x][0] += 0.01 * el[x][1];
                alpha += el[x][0];

                if (el[x][0] > 1) {
                  el[x][1] = -1;
                } else if (el[x][0] < 0) {
                  el[x][1] = 1;
                }

                const _x = x % prism * cx;
                const _y = Math.floor(x / prism) * cy;

                ctx.fillStyle = `hsla(0,100%,100%,${alpha})`;
                ctx.beginPath();
                if (x % 2 == 0) {
                  let o = radius / 2;
                  ctx.moveTo(_x + poly[0], _y + poly[1] - o);
                  ctx.lineTo(_x + poly[2], _y + poly[3] - o);
                  ctx.lineTo(_x + poly[4], _y + poly[5] - o);
                } else {
                  ctx.moveTo(_x + poly2[0], _y + poly2[1]);
                  ctx.lineTo(_x + poly2[2], _y + poly2[3]);
                  ctx.lineTo(_x + poly2[4], _y + poly2[5]);
                }
                ctx.closePath();
                ctx.fill();
              }

              requestAnimationFrame(render);
            };

            init();
            render();

            window.addEventListener('mousemove', e => {
              mouseX = e.clientX;
              mouseY = e.clientY;
            });

            window.addEventListener('touchmove', e => {
              mouseX = e.touches[0].pageX;
              mouseY = e.touches[0].pageY;
            });

            window.addEventListener('resize', e => {
              init();
            }); 
        },

        getdir(){
            var that = this;
            var urlpath = "/mobile.php/Handziku/g_dir";
            var timenow = shijianchuo();
            var urls = ""; 
            if (that.istest == true){
                urls = that.test_url+urlpath;
            }else{
                urls = that.url+urlpath;
            }
            var from = new FormData();
            from.append("ziku_id",that.ziku_id);
            from.append("user_id",that.user_id); 
            from.append("sys",that.sys);
            from.append("t",timenow);
            from.append("token", Getmd5(that.user_id + Getmd5(that.sys + timenow) + that.ziku_id));
            axios.post(urls,from,{ retryDelay: 8000 }).then(res => {
                console.log(res.data);
                let {result,unzip,inipath} = res.data;
                console.log(result,unzip,inipath);
            })
        }
    }//methods
}
</script>

<style>
@import "../../css/sheet/pluginsCss.min.css"
@import "../../css/sheet/plugins.min.css"
@import "../../css/sheet/main.min.css"
    
</style>